<template>
	<view class="main">
		<Header :title="t('setup.deviceInfo')" />
		<view class="main-box">
			<up-cell-group :border="false" class="cell-info">
				<up-cell v-for="(item, index) in infoList" :key="index">
					<template #title>
						<view class="text-box">
							<up-text
								:text="item.name"
								size="14"
								color="#000"></up-text>
							<up-text
								:text="item.title"
								size="14"
								color="#00000060"></up-text>
						</view>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script setup lang="ts">
import Header from "@/components/header/index.vue";
import { getCurrentInstance, ref, computed, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const defaultDevice = useUniversalStorage("DefaultDevice", {});
watch(
	() => defaultDevice.value,
	(val) => {},
	{ immediate: true, deep: true }
);
const infoList = computed<link[]>(() => [
	{
		name: t("device.name") + "：",
		title: defaultDevice.value.name || "",
	},
	{
		name: t("device.desc") + "：",
		title: defaultDevice.value.desc || "",
	},
	{
		name: t("device.sn") + "：",
		title: defaultDevice.value.device_sn || "",
	},
	{
		name: t("device.firmwareVersion") + "：",
		title: defaultDevice.value.firmware_version || "",
	},
]);
</script>

<style lang="scss" scoped>
.main-box {
	padding: 30rpx;
	box-sizing: border-box;
}

.cell-info {
	background-color: #fff;
	border-radius: 10px;
	padding: 15px;
	:deep(.u-cell__body) {
		padding-left: 0 !important;
	}
	.text-box {
		display: flex;
		:deep(.u-text) {
			width: fit-content !important;
			flex: 0 1 auto !important;
		}
	}
}
:deep(.u-cell:last-child) {
	.u-line {
		border: none !important;
	}
}
</style>
